<ActivityView v-deep v-bind="$attrs">
    <ActivityTitle is-app-title>选项</ActivityTitle>
    <ActivityBody v-loading="isLoading">
        <ElCard>
            <style>.custom-tree-node>>> {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-right: 8px;
            }.device-name-more-expand>>>{
                user-select: all;
            }</style>
            <template #header>NFC 设备</template>
            <div style="margin-bottom: 0.5em;">
                <b>默认设备</b><span>:&nbsp;</span>
                <ElTooltip effect="dark" trigger="hover" :content="(cfgDefaultDevice ? parsedDefaultDevice[1] : '请前往设置')" placement="bottom-start">
                    <span tabindex="0">
                        <span v-text="(cfgDefaultDevice ? parsedDefaultDevice[0] : '未设置')" v-deep class="device-name-more-expand"></span>
                    </span>
                </ElTooltip>
                <a href="#" style="margin-left: 1em;" @click.prevent="editDeviceName" v-deep class="edit-device-name">改名</a>
                <a href="#" style="margin-left: 1em;" @click.prevent="setDefaultDevice(null)">清除</a>
            </div>
            <div><b>设备列表:&nbsp;</b><a v-deep class="scan-device" href="#" @click.prevent="loadDevList" :inert="showDeviceTour && nfcDevicesComputed.length">扫描设备</a></div>
            <ElTree v-deep class="device-tree" :data="nfcDevicesComputed" :props="defaultProps">
                <template #default="{ node, data }">
                    <span class="custom-tree-node" v-deep>
                        <span>{{ node.label }}</span>
                        <span style="float: right;" v-if="data.isRoot">
                            <a href="#" @click.prevent.stop="testDevice(data)" style="margin-right: 1.5em;" title="可“点亮”PN532">测试</a>
                            <a href="#" @click.prevent.stop="setDefaultDevice(data)">设为默认</a>
                        </span>
                    </span>
                </template>
                <template #empty>点击「扫描设备」以加载设备列表</template>
            </ElTree>
            <details style="margin-top: 0.5em;">
                <summary>常见问题 （点击展开）</summary>
                <ol>
                    <li>
                        <div><b>Q: </b>如何设置NFC设备？</div>
                        <div><b>A: </b><a href="#" @click.prevent="showDeviceTour = true">点击查看引导</a></div>
                    </li>
                    <li>
                        <div><b>Q: </b>为什么插入设备后，仍然无法识别设备？</div>
                        <div><b>A: </b>请依次排查以下方面：</div>
                        <ul>
                            <li>如果是第一次使用，请确认设备是否安装了正确的驱动？</li>
                            <li>对于PN532设备，驱动<a href="https://www.wch.cn/downloads/CH341SER_EXE.html" target="_blank">可以在这里下载</a>；</li>
                            <li>对于其他设备，请根据设备型号自行搜索，或联系设备制造商。</li>
                            <li>另外，请检查设备是否被其他程序占用；</li>
                            <li>如果始终无法识别，请<a href="https://github.com/shc0743/MyPN532/issues" target="_blank">提供反馈</a>。</li>
                        </ul>
                    </li>
                </ol>
            </details>
            <ElTour v-if="showDeviceTour" v-model="showDeviceTour">
                <ElTourStep title="设置 NFC 设备" :next-button-props="{children:'继续'}">
                    <div style="font-weight: bold; margin-bottom: 0.5em; text-align: center; font-size: x-large;">欢迎设置 NFC 设备！</div>
                    <div style="text-indent: 2em;">本向导将指导您完成NFC设备的设置过程。若要继续，请按“继续”按钮。</div>
                </ElTourStep>
                <ElTourStep target=".scan-device>>>" title="设置 NFC 设备" :next-button-props="{children:'下一步'}" :prev-button-props="{children:'上一步'}">
                    <div style="font-weight: bold; margin-bottom: 0.5em;">第1步：</div>
                    <div style="padding-left: 1em;">点击「扫描设备」以加载设备列表 <b v-if="nfcDevicesComputed.length != 0">(已完成)</b></div>
                </ElTourStep>
                <ElTourStep target=".device-tree>>>" title="设置 NFC 设备" :next-button-props="{children:'下一步'}" :prev-button-props="{children:'上一步'}">
                    <div style="font-weight: bold; margin-bottom: 0.5em;">第2步：</div>
                    <div style="padding-left: 1em;">点击「设为默认」以设置默认设备</div>
                </ElTourStep>
                <ElTourStep target=".edit-device-name>>>" title="设置 NFC 设备" :next-button-props="{children:'下一步'}" :prev-button-props="{children:'上一步'}">
                    <div>可以在这里修改设备名称 (仅展示用，没有实际影响)</div>
                </ElTourStep>
                <ElTourStep target=".device-name-more-expand>>>" title="设置 NFC 设备" :next-button-props="{children:'完成'}" :prev-button-props="{children:'上一步'}">
                    <div>鼠标悬浮在这里可以查看设备的连接字符串 (connstring)</div>
                </ElTourStep>
            </ElTour>
        </ElCard>
        <ElCard style="margin-top: 1em;">
            <!-- <template #header></template> -->
            <div>
                <!-- <b>当前模式:</b>
                <span style="margin: 0 0.5em;">{{isAdvancedUser?'高级模式':'基本模式'}}</span> -->
                <!-- 消灭bug的最快方法就是砍掉出现bug的功能 -->
                应用程序模式: <a href="#" @click.prevent="changeappmode">更改...</a>
            </div>
        </ElCard>
        <ElCard style="margin-top: 1em;">
            <template #header>更新</template>
            <div style="display: flex; align-items: center;">检查更新:&nbsp;<ElCheckbox style="margin: 0 0.5em;" v-model=allowUpdates>允许检查更新</ElCheckbox><ElButton text @click="updateUpdatingPolicy">保存偏好</ElButton></div>
            <div><a href="#/update/check">立即检查更新...</a></div>
        </ElCard>
        <ElCard style="margin-top: 1em;">
            关于: <a href="#/about/">关于...</a>
        </ElCard>
        <ElCard style="margin-top: 1em;">
            <div>版本号: <span v-text="app_version"></span></div>
            <div>内部版本号: <span v-text="internal_version"></span></div>
        </ElCard>
    </ActivityBody>
</ActivityView>